<template>
  <div class="nav">
    <el-row>
      <el-col :span="12">
        <!-- <h5>自定义颜色</h5> -->
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#fff"
          text-color="#000"
          active-text-color="#ffd04b"
        >
        <router-link to="/">
          <el-submenu index="1">
            
              <template slot="title">
              <i class="el-icon-s-home el-icon-color"></i>
              <span slot="title">仪表盘</span>
            </template>
            
           
            <!-- <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu> -->
          </el-submenu>
        </router-link>
          <!-- <el-menu-item index="2">
            <i class="el-icon-box el-icon-color"></i>
            <span slot="title">我的镜像</span>
          </el-menu-item> -->
          

            <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-box el-icon-color"></i>
            <span slot="title">我的镜像</span>
            </template>
            <el-menu-item-group>
              <router-link to="/selectimg"><el-menu-item index="2-1">镜像查询</el-menu-item></router-link> 
              <el-menu-item index="2-2">镜像生成</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
      

          <el-menu-item index="3">
            <i class="el-icon-menu el-icon-color"></i>
            <span slot="title">容器管理</span>
          </el-menu-item>
          <!-- <el-menu-item index="3" disabled> -->
          <el-menu-item index="4">
            <i class="el-icon-document el-icon-color"></i>
            <span slot="title">日志管理</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-office-building el-icon-color"></i>
            <span slot="title">镜像仓库</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-setting el-icon-color"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
:root{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.nav {
  --list_max_width: 250px;
  --list_min_width: 190px;
  width: var(--list_max_width);
  max-width: var(--list_max_width);
  min-width:var(--list_min_width);
  /* border-right: 1px solid #000; */

  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
  /* overflow: hidden; */

  /* background-color="#15749f" */
}
.el-menu{
  border-right: none;
  width: var(--list_max_width);
  height: 100vh;
  max-height: calc(100vh - 60px);
  
  /* height: 100%; */
}
.el-row{
  width: var(--list_max_width);
  max-width: var(--list_max_width);
}
.el-col{
  /* height: 500px; */
  /* max-height: calc(100vh - 60px); */
  /* min-height: calc(100vh - 60px); */
  /* overflow: hidden; */
}
/* el-col el-col-12 */
.el-submenu .el-menu-item{
  max-width: var(--list_max_width);
  min-width: var(--list_min_width);
  /* width: calc( var(--list_min_width - 5px)); */
  width: 100%;
  overflow: hidden;
}
.el-icon-color{
  color: var(--primary-color);
}
</style>
